<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="automatic"
      @scroll="scroll"
      :refresher-enabled="false"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="line-clamp-1 flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> 资产检测 </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[14px] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="flex flex-col gap-5 p-4">
        <view class="flex flex-col gap-2">
          <view class="text-[1.25rem] text-[#161A24] font-bold"> 资产检测情况</view>
          <view class="text-[.875rem] text-[#161A24]">注销账号前需满足账号内无资产，当前账号资产情况：</view>
        </view>
        <view class="bg-[#FFFFFF] rounded-[.75rem] p-4 flex flex-col gap-2">
          <view class="text-[.875rem] text-[#161A24] font-bold"> 账户余额 </view>
          <view class="text-[.8125rem] text-[#5C6068] font-bold before:content-['']"> {{ data.normal_amount }}</view>
        </view>
        <view class="bg-[#FFFFFF] rounded-[.75rem] p-4 flex flex-col gap-2">
          <view class="text-[.875rem] text-[#161A24] font-bold"> 钓钻 </view>
          <view class="text-[.8125rem] text-[#5C6068] font-bold after:content-['个']"> {{ data.diamond }}</view>
        </view>
      </view>
      <template #bottom>
        <view class="pb-env">
          <view class="px-4 py-3" style="">
            <view class="flex justify-center">
              <view
                :class="isValid ? 'bg-[#99DBDC]' : 'bg-[#00A9AB]'"
                class="h-[2.75rem] w-full rounded-full flex items-center justify-center btn"
                @click="logOff"
              >
                <text class="text-[1rem] text-[#E5F6F6]">注销</text>
              </view>
            </view>
          </view>
        </view>
      </template>
    </yy-paging>
    <yy-alert ref="alert" @alertConfirm="alertConfirm"></yy-alert>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false,
        dataList: [],
        automatic: false,
        isValid: false,
        data: {}
      }
    },
    onLoad(options) {
      this.wallet()
    },
    methods: {
      async wallet() {
        const res = await api.wallet()
        this.data = res.data
        this.isValid = res.data.normal_amount === 0
      },
      async alertConfirm() {
        let d = await api.deleteAccount()
        if (!d?.code) return vk.toast(d.msg, 'none')
        vk.myfn.logout()
        // TODO: 执行注销逻辑
      },

      logOff() {
        this.$refs.alert.config({
          show: true,
          title: '注销提示',
          describe: '注销账号后，您的账号将无法恢复。请确认账号内资产已处理完毕，确定要注销吗？',
          cancel: '再想想',
          cancelColor: '#000',
          confirm: '确定注销',
          confirmColor: '#FF3A56',
          eventType: 'logOff'
        })
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        this.$refs.paging.complete([''])
      }
    }
  }
</script>

<style lang="scss" scoped></style>
